<div xmlns:h="http://java.sun.com/jsf/html" xmlns:c="http://java.sun.com/jstl/core"
  xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:a4j="http://richfaces.org/a4j" xmlns:nxu="http://nuxeo.org/nxweb/util"
  xmlns:nxd="http://nuxeo.org/nxweb/document">

  <h:outputScript target="#{pageJsTarget}" src="/scripts/jquery/jquery.tablesorter.js" />
  <h:outputScript target="#{pageJsTarget}" src="/scripts/jquery/jquery.tablesorter_filter.js" />
  <h:outputStylesheet target="#{pageCssTarget}">
.tablesorter .header {
  background-position: center left;
  background-repeat: no-repeat;
  padding-left:20px;
}

.tablesorter .headerSortDown {
  background-image: url(#{baseURL}icons/sort_down.png);
}

.tablesorter .headerSortUp {
  background-image: url(#{baseURL}icons/sort_up.png);
}

.tablesorter .odd {
  background-color: #fff;
}

.tablesorter .even {
  background-color: #ECF6FF;
}

.tablesorter {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border:1px solid #ccc;
}

.tablesorter td, .tablesorter th {
  padding:5px;
}

.tablesorter th {
  background: none repeat scroll 0 0 #333;
  color: white;
  text-align: left;
  text-shadow: none;
  font-weight: bold;
}
  </h:outputStylesheet>

  <a4j:outputPanel id="workManagerListing" layout="block">

    <p/>
    <h:form>
      <a4j:commandLink value="Refresh" render="workManagerListing" styleClass="button" />
      <a4j:commandLink value="Start test work" render="workManagerListing" styleClass="button"
        action="#{workManagerAdmin.startTestWork}"/>
    </h:form>

    <c:set var="infos" value="#{workManagerAdmin.workQueuesInfo}" />
    <c:set var="currentTimeMillis" value="#{workManagerAdmin.currentTimeMillis}" />

    <ui:repeat var="info" value="#{infos}">
      <h2 class="workManagerQueueTitle">Queue <em>#{info.id}</em> (#{info.scheduled}/#{info.running}/#{info.completed})</h2>
      <div class="workManagerQueueInfo">
      <f:subview rendered="#{info.runningWorks.size > 0}">
        <p><strong>Running</strong></p>
        <h:dataTable var="work" value="#{info.runningWorks}" styleClass="tablesorter">
          <h:column>
            <f:facet name="header">Work</f:facet>
            #{work.title}
          </h:column>
          <h:column>
            <f:facet name="header">Path</f:facet>
            <h:outputText value="#{work.schedulePath}" title="#{work.schedulePath}"/>
          </h:column>
          <h:column>
            <f:facet name="header">Scheduled</f:facet>
            <h:outputText value="#{work.schedulingTime}" title="#{work.schedulingTime}">
              <f:convertDateTime
                pattern="#{nxu:dateAndTimeFormatter('medium')}"
                timeZone="#{timeZone}" />
            </h:outputText>
          </h:column>
          <h:column>
            <f:facet name="header">Status</f:facet>
            #{work.status}
          </h:column>
          <h:column>
            <f:facet name="header">Progress</f:facet>
            <h:outputText rendered="#{work.progress.isWithPercent}"
                value="#{work.progress.percent}%" />
            <h:outputText
              rendered="#{work.progress.isWithCurrentAndTotal}"
              value="#{work.progress.current}/#{work.progress.total}" />
            <h:outputText rendered="#{work.progress.isIndeterminate}"
              value="..." />
            </h:column>
        </h:dataTable>
      </f:subview>
      </div>
    </ui:repeat>

    <h:outputScript target="#{pageJsTarget}">
      // console.log("FOO");
      // $(document).ready(function(){
        jQuery(".tablesorter").tablesorter();
        jQuery(".workManagerQueueTitle").click(function() {
          $(this).next(".workManagerQueueInfo").toggle();
        });
      // });
    </h:outputScript>

  </a4j:outputPanel>
</div>
